import request from "../../utils/request.js"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 轮播图图片
    banners: [],
    // 推荐歌单
    recommendList: [],
    // // 前排行榜
    // prePlayList:[],
    // // 后排行榜
    // nextPlayList:[]
    // 排行榜
    playList: []
  },

  // 封装数据优化函数，裁剪排行榜获取的歌曲数量和返回数据
  optimizationData(res) {
    return {
      id: res.playlist.id,
      name: res.playlist.name,
      tracks: res.playlist.tracks.slice(0, 10).map(item => {
        return item = {
          name: item.al.name,
          id: item.al.id,
          picUrl: item.al.picUrl
        }
      })
    }
  },

  // 排行榜当前页面改变时
  async changeHandle(e) {
    const current = e.detail.current
    const {playList} = this.data
    const pages = playList.length
    // 如果是最新的页面，那么需要发送请求获取最新的类别排行榜,
    // 当前页面current从0开始
    if (current > pages - 4) {
      const res = await request(`/top/list?idx=${pages}`)
      playList.push(this.optimizationData(res))
      this.setData({
        playList
      })
    }
  },

  // 点击跳转到每日推荐歌曲页面
  toRecommendSong(){
    wx.navigateTo({
      url: '../../package/pages/recommendSong/recommendSong',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  // onLoad: async function(options) {
  //   // 获取轮播图列表
  //   const [{
  //     banners
  //   }, {
  //     result
  //   }, preRes, curRes, nextRes,afterNextRes] = await Promise.all(
  //     [request('/banner'), request("/personalized"), request("/top/list?idx=0"), request("/top/list?idx=1"), request("/top/list?idx=2"),request("/top/list?idx=3")])

  //   // 返回数据添加到data中，会进行数据代理和劫持，添加前对返回数据进行选取可以减少不必要的性能消耗
  //   this.setData({
  //     banners: banners.map(item => {
  //       return item = {
  //         imageUrl: item.imageUrl,
  //         targetId: item.targetId
  //       }
  //     }),
  //     recommendList: result.map(item => {
  //       return item = {
  //         id: item.id,
  //         picUrl: item.picUrl,
  //         name: item.name
  //       }
  //     }),
  //     // prePlayList:preRes.playlist,
  //     // nextPlayList:nextRest.playlist
  //     playList: [
  //       this.optimizationData(preRes), 
  //       this.optimizationData(curRes),
  //       this.optimizationData(nextRes),
  //       this.optimizationData(afterNextRes)
  //     ]
  //   })
  // },

// 使用promise.all配合async需要等所有请求都成功，才会执行更新data数据，再重新发送请求图片等进行渲染，
// 使用promise.then也可以不分先后同时发送请求，并且只要其中某一个请求成功后，对应的回调函数即执行，更新所在data中所在数据的值，
// 并立即发送请求对应图片进行渲染，可以节省发送请求的等待时间，优化页面的加载
  onLoad: function(options){
    // 请求轮播图
    request("/banner").then((res)=>{
      const {banners} = res
      this.setData({
        banners: banners.map(item => {
          return item = {
            imageUrl: item.imageUrl,
            targetId: item.targetId
          }
        })
      })
    })
    // 请求每日推荐
    request("/personalized").then(res => {
      const { result } = res
      this.setData({
        recommendList: result.map(item => {
          return item = {
            id: item.id,
            picUrl: item.picUrl,
            name: item.name
          }
        })
      })
    })
    // 请求排行榜
    const arr = [0,1,2,3]
    arr.forEach(item=>{
      request(`/top/list?idx=${item}`).then(res=>{
        const {playList} = this.data
        playList.push(this.optimizationData(res))
        this.setData({
          playList
        })
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})